<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打地鼠</title>
    <style>
        h1{
            /* 水平居中 */
            text-align: center;
            /* 上下居中 */
            line-height: 30px;
        }
        .bigBox{
           width: 60%;
           height: 400px;
           /* 水平居中：外边距设置居中 上下20px间距 */
           margin: 20px auto;
           /* 背景颜色 */
           background-color: #cbbb3e; 
        }
        .hamster-container{
            /* 容器高度 */
            height: 200px;
            /* 默认竖着显示,调整为横着显示 */
            display: flex;
            /* 左右居中 */
            justify-content: center;
            /* 上下居中 */
            align-items: center;
        }
        .hamster-hole{
            width: 100px;
            height: 100px;
            background-color: #f5732d;
            /* 调整间距,使其间隔显示5个地洞 */
            margin: 0px 20px;
        }
        .hamster-mole{
            width: 100px;
            height: 100px;
            background-image: url('https://pic.52112.com/180516/EPS180516_57/9jagBhddHW_small.jpg');
            background-size: 100% 100%;
            /* 隐藏地鼠 */
            display: none;
        }
        .hamster-score {
            font-size: 30px;
            text-align: center;
        }
        .hamster-message {
            font-size: 20px;
            text-align: center;
            margin-top: 20px;
            /* 鼠标指针变小手 */
            cursor: pointer;
        }
        .hamster-mole--up {
          /* 显示地鼠 */
          display: block;
        }
    </style>
</head>
<body>
    <h1>打地鼠</h1>
    <!-- 游戏区域 -->
    <div class="bigBox">
        <!-- 地鼠区域 -->
        <div class="hamster-container">
            <!-- 制作地鼠洞 -->
            <div class="hamster-hole">
                <!-- 制作地鼠 -->
                <div class="hamster-mole"></div>
            </div>
            <!-- 制作地鼠洞 -->
            <div class="hamster-hole">
                <!-- 制作地鼠 -->
                <div class="hamster-mole"></div>
            </div>
            <div class="hamster-hole">
                <!-- 制作地鼠 -->
                <div class="hamster-mole"></div>
            </div>
            <div class="hamster-hole">
                <!-- 制作地鼠 -->
                <div class="hamster-mole"></div>
            </div>
            <div class="hamster-hole">
                <!-- 制作地鼠 -->
                <div class="hamster-mole"></div>
            </div>
        </div>
        <!-- 显示分数 -->
        <div class="hamster-score">分数:0</div>
        <!-- 点击按钮 -->
        <div class="hamster-message">准备好了吗?点击我开始</div>
    </div>

    <!-- 添加游戏逻辑-->
    <script>
        // 初始化和变量声明
        // 获取类名为 "hamster-container" 的DOM元素  
        var container = document.querySelector(".hamster-container");  
        // 获取类名为 "hamster-score" 的DOM元素，用于显示分数  
        var scoreBoard = document.querySelector(".hamster-score");   
        // 获取类名为 "hamster-message" 的DOM元素，用于显示消息  
        var message = document.querySelector(".hamster-message");  
        // 获取类名为 "hamster-hole" 的所有DOM元素，并转换为数组，表示所有的地鼠洞  
        var moles = Array.from(container.querySelectorAll(".hamster-hole"));  
      
        // 记录上一个出现地鼠的洞，用于避免连续出现在同一个洞  
        let lastHole;  
        // 分数初始化为0  
        let score = 0;  
        // 游戏状态，初始化为未开始  
        let isPlaying = false;  
        // 游戏是否结束（时间到），初始化为未结束  
        let timeUp = false;  
        // 随机时间生成地鼠  
        function popUpMole() {  
          // 如果游戏已经结束（时间到），则不生成地鼠  
          if (timeUp) return;  
          // 生成一个随机时间（500ms到1500ms之间）  
          var time = Math.random() * (1500 - 500) + 500;  
          // 随机选择一个地鼠洞  
          var hole = randomHole(moles);  
          // 让该洞的地鼠出现  
          hole.querySelector("div").classList.add("hamster-mole--up");  
          // 设定一个延时，让地鼠在一段时间后消失，并继续生成新的地鼠  
          setTimeout(() => {  
            hole.querySelector("div").classList.remove("hamster-mole--up");  
            if (!timeUp) popUpMole();  
          }, time);  
        }  
        // 随机选择一个地鼠洞  
        function randomHole(holes) {  
          // 生成一个随机索引  
          const idx = Math.floor(Math.random() * holes.length);  
          // 根据索引获取对应的地鼠洞  
          const hole = holes[idx];  
          // 如果随机到的洞和上一个洞相同，则重新随机  
          if (hole === lastHole) return randomHole(holes);  
          // 更新上一个洞为当前洞  
          lastHole = hole;  
          // 返回选中的地鼠洞  
          return hole;  
        }  

        // 点击地鼠时的处理  
        function clickHamster(e) {  
          // 如果游戏未开始，则忽略  
          if (!isPlaying) return;  
          // 如果点击的不是地鼠，则结束函数 
          if (!e.target.matches(".hamster-mole")) return;  
          // 分数加1  
          score++;  
          // 更新分数显示  
          scoreBoard.textContent = '分数:'+score;  
          // 移除地鼠显示  
          e.target.parentNode  
            .querySelector("div")  
            .classList.remove("hamster-mole--up");  
        }  
        // 为每个地鼠洞添加点击事件监听器  
        moles.forEach(function(mole){
            mole.addEventListener("click", clickHamster)
        })
        
        // 为消息框添加点击事件监听器，用于开始游戏  
        document  
          .querySelector(".hamster-message")  
          .addEventListener("click", startGame);
        // 开始游戏  
        function startGame() {  
          // 初始化分数  
          score = 0;  
          // 更新分数显示  
          scoreBoard.textContent = "分数: 0";  
          // 设置游戏状态为开始  
          isPlaying = true;  
          // 设置游戏结束状态为未结束  
          timeUp = false;  
          // 清除消息显示  
          message.textContent = "";  
          // 开始生成地鼠  
          popUpMole();  
          // 设定一个60秒（60000ms）的延时，到时结束游戏并显示分数  
          setTimeout(() => {  
            isPlaying = false;  //关闭游戏
            timeUp = true;  //时间暂停
            message.textContent = `一分钟您的得分是: ${score}；点我再来一次！`;  
          }, 60000);  
        }  

    </script>
</body>
</html>